<template>
  <div class=" ">

    <div class="titleClass"  v-show="isRunning" >正在直播列表</div>
    <div class="titleClass" v-show="!isRunning" >历史活动列表</div>

    <scroller lock-x :height="scrollHeigthPx" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="scrollHeigth"
              :use-pulldown="true"  @on-pulldown-loading="doRefresh" @on-scroll="onScroll"
              :pulldown-config="{downContent:'下拉刷新',upContent:'释放后刷新' , loadingContent:'加载中...'}"
              style="padding-bottom: 10px;">
      <div class="box2">
        <div  v-for="(item, i) in runProjects" class="oneProjectDiv" style="" @click="goProjectByID(item.projectId)" >
          <div style="display: block; padding: 10px; padding-bottom: 0px; height: 100px;">
            <div style="display: inline-block;width: 40%; height: 100px;
            padding:0px; float: left; overflow:hidden" class="" >
              <!--<img :src="item.aPath" style="height:100%; width: 100%; margin: 0px;padding:0px;"  />-->
              <div :style="{backgroundImage:'url('+item.aPath+')'}"  class="zoomImage"   ></div>
            </div>

<!--            <div style="display: inline-block;  width: 50% ; padding: 5px;">
              <div style="margin-bottom: 5px; font-size: 16px;">{{item.proTitle}}</div>
              <div  style="margin-top: 10px; font-size: 14px;">{{item.proDesc}}</div>
            </div>-->

            <div style="display: inline-block;  width: 50% ; padding-left: 15px; padding-top: 0px; position: relative;height: 100px;">
              <div style="margin-bottom: 5px; font-size: 13px;margin-top: 5px;
              font-family: PingFangSC-Medium, 'PingFang SC',sans-serif;color: #424242; font-weight: bold;">
                {{item.proTitle}}</div>

              <div style=" position:absolute; bottom: 5px;">
                <img  v-for="(oneTag , i) in JSON.parse(item.classtype)" class="tag1Class"  :src="tagImgs[oneTag]" />
                <!--<div class="tag1Class" :style="tag1Img" ></div>-->

                <div  style="margin-top: 1px; font-size: 11px; color:#717171;
            font-family: PingFangSC-Regular,'PingFang SC', sans-serif; ">{{item.updateTime.substring( 0 ,10)}}</div>
              </div>
            </div>

          </div>
        </div>
        <load-more :tip="loadMoreTip"  :show-loading="!isAllPros"
                   style="font-family: PingFangSC-Regular, 'PingFang SC', sans-serif;">

        </load-more>
      </div>
    </scroller>

    <a href="javascript:;" @click="backTop" v-show="backToTop"
       style=" position: fixed;bottom: 30px;right: 30px; font-size: 20px; ">
      <img src="@/assets/back-to-top.png" width="50px;" height="50px;"/>
    </a>

  </div>
</template>

<script>

  import { Scroller ,LoadMore  } from 'vux'

  export default {
    components: {   Scroller ,LoadMore   },
    data () {
      return {
        baseUrl: process.env.BASE_URL,
        runProjects:[       ],
        runProjects2:[
          { proId:1 , proTitle:"活动标题1111" , proDesc:"desc1"  },
          { proId:2 , proTitle:"活动标题我十一2"  , proDesc:"desc1" },
          { proId:3 , proTitle:"活动标题333"  , proDesc:"desc1" },
          { proId:4 , proTitle:"活动标题444"  , proDesc:"desc1" },
          { proId:5 , proTitle:"活动标题444"  , proDesc:"desc1" },
          { proId:6 , proTitle:"活动标题444"  , proDesc:"desc1" },
          { proId:7 , proTitle:"活动标题444"  , proDesc:"desc1" },
          { proId:8 , proTitle:"活动标题444"  , proDesc:"desc1" },
          { proId:9 , proTitle:"活动标题444"  , proDesc:"desc1" },
        ],
        tmpImg: process.env.BASE_URL +'/resources/photo/1.jpg',
        onFetching: false,
        isRunning : false,
        scrollHeigth:'0',
        scrollHeigthPx:'0px',
        backToTop : false ,
        currentScroll : 0 ,

        table : {
          total : 1 ,
          current : 0 ,
          pageSize : 10 ,
        },

        proQuery :{
          status: -1,
          proTitle:'-1',
          classType:"-1",
        },

        isAllPros : false ,
        loadMoreTip : '加载中...' ,
        tagImgs:{
          0:'',
          1: require('@/assets/tag1.png') ,
          2: require('@/assets/tag2.png'),
          3: require('@/assets/tag3.png') ,
          4: require('@/assets/tag4.png'),
          5: require('@/assets/tag5.png'),
          6: require('@/assets/tag6.png'),
          7: require('@/assets/tag7.png'),
        },
      }
    },
    methods: {
      onScroll (pos) {
        let vm = this;
        vm.currentScroll = pos.top;
        if(  vm.currentScroll >  vm.scrollHeigth + 150 )  {
          vm.backToTop = true;
        }else{
          vm.backToTop = false;
        }
      },
      backTop (){
        let vm = this;

        let back = setInterval(() => {
          if ( vm.currentScroll  > 0 ) {
            vm.currentScroll -= 100;
            if( vm.currentScroll <0 )  {
              vm.currentScroll = 0;
            }
            this.$refs.scrollerBottom.reset(  {top: vm.currentScroll }  );
          } else {
            clearInterval(back);
          }
        });

        vm.backToTop = false;
      },
      doRefresh(){
        let vm = this;
        // setTimeout(() => {
        //   this.$refs.scrollerBottom.donePulldown()
        // }, 1000)

        vm.table.total = 1;
        vm.table.current = 0;
        vm.runProjects = [];
        vm.getProjects( true );

      },
      onScrollBottom () {
        let vm = this;

        if (this.onFetching) {
          // do nothing
        } else {
          vm.getProjects();

          // setTimeout(() => {
          //   this.runProjects = this.runProjects.concat( this.runProjects2 );
          //   this.$nextTick(() => {
          //     this.$refs.scrollerBottom.reset()
          //   })
          //   this.onFetching = false
          // }, 2000);
        }
      },
      resetProScroll(){
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset()
          })
      },
      goProjectByID( proId ){
        // console.log(  "  proId : " + proId );
        if(proId == -1) {
          return;
        }
        this.$router.push({ name: 'ViewProject', query: { pid: proId , showCover : true }    })
      },
      getProjects( refreshFlag ){
        let vm = this;
        if ( vm.table.current >=  vm.table.total ) {
          return ;
        }

        this.onFetching = true;
        let path = "guest/getProsByCriteria";
        vm.$http.post( path , {
              current : vm.table.current,
              pageSize : vm.table.pageSize,
              status :  vm.proQuery.status,
              proTitle :  vm.proQuery.proTitle,
              classType :  vm.proQuery.classType,
          }
        ).then(function (response) {
          if (response.data.result) {

            // console.log( response.data );
            vm.table.total = response.data.total;
            vm.table.current = response.data.current;

            let newPros = response.data.pro;
            for( let tindex in newPros){
              let tmp = newPros[tindex];
              tmp.aPath =  vm.baseUrl + tmp.coverImg;
            }

            vm.runProjects = vm.runProjects.concat( newPros );
            vm.resetProScroll();
            if(  vm.table.current >= vm.table.total ){
              vm.isAllPros = true;
              vm.loadMoreTip = "没有更多啦";

              let srcollTipDiv = document.getElementsByClassName('xs-plugin-pulldown-container')[0];
              if( srcollTipDiv!=null ){
                srcollTipDiv.style.top = "-69px";
              }
            }else{
              vm.isAllPros = false;
              vm.loadMoreTip = "加载中...";
            }
          }
          vm.onFetching = false;

          if( refreshFlag )  {
            vm.$refs.scrollerBottom.donePulldown()
          }
        }).catch(function (error) {
          this.onFetching = false;
          if( refreshFlag )  {
            vm.$refs.scrollerBottom.donePulldown()
          }
          console.log(error)
        })

      },


    },
    created () {
      let vm = this;
      vm.proQuery.status = parseInt(vm.$route.query.status) ;
      vm.proQuery.proTitle = vm.$route.query.proTitle;
      vm.proQuery.classType = vm.$route.query.classType;
      if( vm.proQuery.status==1 ){
        vm.isRunning=true;
      }else if( vm.proQuery.status==2 ){
        vm.isRunning=false;
      }

    },
    mounted(){
      let vm = this;
      let clientHeight = `${document.documentElement.clientHeight}`;
      vm.scrollHeigth = clientHeight -80;
      vm.scrollHeigthPx = vm.scrollHeigth + "px";

      vm.onScrollBottom();

    },
  }
</script>

<style scoped>
  .titleClass {
    padding: 10px 0px 5px 10px;
    font-size: 22px;
    display: inline-block;
    font-family: PingFangSC-Medium, 'PingFang SC', sans-serif;
    color: #3e3e3e;
  }

  >>>.weui-loadmore__tips{
    font-size: 12px;
    color: #aaa;
  }

  >>>.xs-plugin-pulldown-container{
    font-size: 12px;
    color: #aaa;
  }

  .tag1Class{
    width: 42px;
    height: 19px;
    margin-right: 5px;
  }

  .zoomImage{
    width:100%;
    height:0px;
    padding-bottom: 100%;
    overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
  }

</style>
